<!-- 注册页 -->
<template>
	<view class="re_content">
		<view class="backColor"></view>
		<view :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 返回上一页 -->
		<view class="re_return">
			<image :src="HTTP_IMG_UTL + 'fanhui.png'" style="width: 28rpx;height: 40rpx;" mode="" @click="handelReturn" />
			<view></view>
		</view>
		<!-- 注册成为GLUZ会员 文字 -->
		<view class="re_GLUZ_title">
			<view>
				<view v-if="lang === 'zh'">
					<span style="font-size: 48rpx;font-weight: bold;">注册GLUZ</span>
					<!-- <span style="font-size: 68rpx;font-weight: bold;">GLUZ</span>
					<span style="font-size: 36rpx;font-weight: bold;">用户</span> -->
				</view>
				<view v-if="lang === 'ru'">
					<!-- <span style="font-size: 35rpx;font-weight: bold;">Регистрация в </span>
					<span style="font-size: 38rpx;font-weight: bold;margin-left: 5rpx;">GLUZ</span> -->
					<span style="font-size: 48rpx;font-weight: bold;">注册GLUZ</span>
				</view>
			</view>
			<view>
				<!-- <span v-if="lang==='zh'">Зарегистрироваться как пользователь GLUZ</span> -->
				<!-- <span v-if="lang==='ru'">Регистрация в GLUZ.</span> -->
			</view>
		</view>
		<!-- 切换语言 -->
		<!-- <view class="re_lang">
			<view class="re_lang_ri">
				<view v-for="(item,index) in language" :key="index" @click="handelLang(index)"
					:class="index===indexID?'itemActive':'active'">{{item.name}}</view>
			</view>
		</view> -->
		<!-- form表单 -->
		<view class="re_form">
			<u-form labelPosition="top" :model="model" ref="uForm">

				<u-form-item prop="mobile">
					<view class="re_mobile">
						<view style="display: flex; align-items: center;margin-right: 14rpx;" @click="handeleAreaCode">
							<image class="ico" src="/static/img/chain.png" v-if="AreaCode == '+86'"></image>
							<image class="ico" src="/static/img/ru.png" v-else></image>
							<view class="re_mobile_87">{{ AreaCode }}</view>
							<image src="/static/img/xialaxx.png" style="width: 20rpx;height: 12rpx;margin-right: 14rpx;" />
						</view>


						<!-- <view class="re_line" style="margin-right: 20rpx;"></view> -->
						<u-input type="number" maxlength="11" v-model="model.mobile" :placeholder="$t('请输入手机号')" clearable
							:border="border" />
					</view>
				</u-form-item>
				<u-form-item prop="email" v-if="indexID === 1" key="email">
					<view class="" style="margin-right: 10rpx;">
						{{ $t('邮箱') }}
					</view>
					<u-input v-model="model.email" :placeholder="$t('请输入邮箱')" clearable :border="border" />
				</u-form-item>
				<u-form-item prop="password">
					<view style="margin-right: 10rpx;">
						{{ $t('登录密码') }}
					</view>
					<u-input :type="type" v-model="model.password" :placeholder="$t('请输入密码')" clearable :border="border" />
				</u-form-item>

				<u-form-item prop="captcha">
					<view class="re_VerificationCode">
						<view style="margin-right: 10rpx;">
							{{ $t('验证码') }}
						</view>
						<u-input type="number" v-model="model.captcha" :placeholder="$t('请输入验证码')" :border="border" />
						<view style="color: #8C8C8C;" @click.stop="sendVerificationCode">
							<!-- <view class="re_line"></view> -->
							<view>{{ isCounting ? `${countdown}S` : $t('获取验证码') }}</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item>
					<view style="margin-right: 10rpx;">
						{{ $t('邀请码') }}
					</view>
					<u-input v-model="model.agent_code" :border="border" clearable :placeholder="$t('请填写邀请码')" />
					<view>
						<view style="color: #278AFF;">非必填</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<!-- 隐私政策 -->
		<view class="log_group">
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="log_u-checkbox">
					<u-checkbox active-color="#278AFF" @change="checkboxChange" v-model="item.checked"
						v-for="(item, index) in list" :key="index" :name="item.name" size="28rpx">
					</u-checkbox>
					<view style="font-size: 25rpx;margin-left: -20rpx;">
						<span>阅读并同意</span>
						<span style="color: #16C186;">《GULZ用户</span>
						<span style="color: #16C186;" @click.stop="handeleLink">{{ $t('服务协议') }}</span>
						<span style="color: #16C186;">{{ $t('和') }}</span>
						<span style="color: #16C186;" @click.stop="handeleAgreement">{{ $t('隐私政策') }}》</span>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<!-- 注册按钮 -->
		<view class="re_but">
			<view style="width: 90%;">
				<u-button class="custom-style" :disabled="isDisabled" :loading="isLoading" @click="handelSubmit">
					{{ $t('注册') }}
				</u-button>
			</view>
		</view>

		<!-- <view class="existence" @click="handelAlreadyhaveanaccount">{{$t('已有帐号，立即前往登录')}}</view> -->



		<!-- 底部弹窗 -->
		<u-picker v-model="iSshow" mode="selector" :range="selectorObj" range-key="name" :confirm-text="$t('确定')"
			:cancel-text="$t('取消')" @confirm="handelConfirm" :default-selector="[AreaCodeIndex]" />
		<!-- <view class="backColor"></view> -->

		<!-- 获取权限的功能 -->
		<Permission></Permission>
	</view>
</template>

<script>
import {
	IMAGE_URL,
	HTTP_IMG_UTL
} from "@/config/app";
// #ifdef APP-PLUS
import {
	init,
	login
} from '@/utils/im'
// #endif
import Permission from "@/components/Permission.vue"

export default {
	components: {
		Permission
	},
	data() {
		return {
			list: [{ //协议选择的状态
				name: '协议',
				checked: false,
				disabled: false
			}],
			HTTP_IMG_UTL,
			type: 'password', //密码输入框password模式
			AreaCode: '+86', //默认选择的code
			iSshow: false, //控制底部弹窗显示与隐藏
			selectorObj: [{ //code数组
				name: '+86'
			}, {
				name: '+7'
			}], //切换语言
			isCounting: false, //短信验证码显示文字控制隐藏显示
			countdown: 60, //验证码倒计时60秒
			timer: null, //setInterval
			isDisabled: false, //disabled  防抖
			isLoading: false, //loading
			border: false, //控制隐藏input外边框
			model: { //表单
				agent_code: '', //邀请码
				mobile: '', //手机号码
				password: '', //确认密码
				captcha: '',
				email: '', //验证码
			},
			test: '测试',
			language: [{
				name: '中'
			}, {
				name: 'RU'
			}], //切换语言
			lang: 'zh', //默认语言
			indexID: 0, //下标
			nowLang: 'zh', //获取协议接口使用的当前语言
			xyContent2: '', //隐私内容
			langs: 'zh',
			AreaCodeIndex: 0,
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight

		}
	},
	onShow() {
		this.nowLang = this.$i18n.locale
		this.getLang()
	},
	methods: {
		// 服务政策
		handeleLink() {
			this.$u.route({
				url: '/pages/user/privacy/privacy',
				params: {
					type: 'GLUZ用户账号服务协议'
				}
			})
		},
		// 隐私协议
		handeleAgreement() {
			uni.navigateTo({
				url: '/pages/user/privacy/agreement'
			})
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			//console.log(e);
		},
		// 提交注册
		handelSubmit() {
			const regex = /^[1][3-9][0-9]{9}$/;
			if (this.model.mobile === '') {
				uni.showToast({
					title: this.$t('请输入手机号'),
					icon: 'none',
					duration: 1000
				})
			} else if (this.lang === 'zh') { //如果是中国用户判断
				if (!regex.test(this.model.mobile)) { //正则判断手机号是否正确
					uni.showToast({
						title: this.$t('手机号码不正确'),
						// title:'手机号码不正确',
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.password.length < 8) { //判断密码是否大于8位
					uni.showToast({
						// title: this.$t('手机号码不正确'),
						title: '密码长度必须大于8位',
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.captcha === '') { //判断验证码是否为空
					uni.showToast({
						title: this.$t('请输入验证码'),
						icon: 'none',
						duration: 1000
					})
				} else {
					// console.log('中国用户调接口');
					this.Submit()
				}
			} else if (this.lang === 'ru') { //如果是俄罗斯用户判断
				if (this.model.mobile.length !== 10) { //正则判断手机号是否正确
					uni.showToast({
						title: this.$t('手机号码不正确'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.password.length < 8) { //判断密码是否大于8位
					uni.showToast({
						title: this.$t('密码长度必须大于8位'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.captcha === '') { //判断验证码是否为空
					uni.showToast({
						title: this.$t('请输入验证码'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.email === '') { //判断邮箱是否为空
					uni.showToast({
						title: this.$t('请输入邮箱'),
						icon: 'none',
						duration: 1000
					})
				} else {
					// console.log('俄罗斯用户调接口');
					this.Submit()
				}
			}

		},
		// 调注册接口
		Submit() {
			// 判断用户是否选则协议
			if (!this.list[0].checked) {
				uni.showModal({
					title: this.$t('温馨提示'),
					content: this.$t('注册前请先阅读并同意GLUZ用户账号的服务协议和隐私政策'),
					cancelText: this.$t('不同意'), // 取消按钮的文字  
					confirmText: this.$t('同意'), // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#DB9C28',
					cancelColor: '#656565',
					success: (res) => {
						if (res.confirm) {
							this.list[0].checked = true
							// 调用登录接口进行登录
							this.setLogin()
							console.log('comfirm') //点击确定之后执行的代码
						} else {
							this.list[0].checked = false
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})
			} else {
				// 如果协议为真直接调接口
				this.setLogin()
			}

		},
		// 选择区号
		handeleAreaCode() {
			// 控制底部弹窗的弹出与收起
			this.iSshow = !this.iSshow
		},
		// 选择语言
		handelConfirm(e) {
			this.AreaCodeIndex = e[0]
			// 根据下标切换选择的+86或+7
			this.AreaCode = this.selectorObj[e[0]].name
			if (this.AreaCode == '+86') {
				this.indexID = 0
			}
			if (this.AreaCode == '+7') {
				this.indexID = 1
			}



		},
		setLogin() {
			this.isDisabled = true
			this.isLoading = true
			this.model.country = this.indexID
			// this.model.mobile = this.AreaCode==="86"?this.model.mobile:this.AreaCode+this.model.mobile
			this.$u.api.user.newRegister(this.model).then(res => {
				// 注册成功使用账号密码登录
				this.$u.api.user.login({
					account: this.model.mobile, //手机号
					password: this.model.password, //密码
					country: this.indexID, //国家
				}).then(res => {
					if (res) {
						uni.clearStorage(); //清本地缓存
						uni.clearStorageSync(); //清本地缓存
						uni.setStorage({ //设置缓存语言
							key: 'lang',
							data: this.lang,
							success: function () { }
						})
						uni.setStorageSync('startPage', new Date().getTime())
						this.$i18n.locale = this.lang
						getApp().globalData.lang = this.lang
						getApp().globalData.mobile = res.mobile
						uni.setStorageSync('user_id', res.user_id);
						uni.setStorageSync('activityNum', 0);
						uni.setStorageSync('mobile', res.mobile); //这个和下面存缓存的重复了，拷贝的原登录代码别问为啥这么写
						uni.setStorage({ //这个和上面存缓存的重复了，拷贝的原登录代码别问为啥这么写
							key: 'mobile',
							data: res.mobile, //存手机号
							success: function () {
								uni.setStorage({ //存token
									key: 'xzdToken',
									data: res.token,
								});
							}
						});
						// 给用户一个提示
						uni.showToast({
							title: this.$t('注册成功，已为您自动登录'),
							icon: 'none',
							duration: 1000
						})
						// 一秒后跳转到认证页面
						// #ifdef APP-PLUS
						login();
						// #endif
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/user/register/authentication'
							})
						}, 1000)

					}
				})
				this.isDisabled = false
				this.isLoading = false
			}).catch(err => {
				console.log('err:', err);
				this.isDisabled = false
				this.isLoading = false
			})
		},
		// 点击获取短信验证码文字
		sendVerificationCode() {
			// 判断手机号是否为空
			if (this.model.mobile === '') {
				this.$u.toast(this.$t('请输入手机号'));
				return
			}
			if (this.isCounting) return;
			this.getPhoneNumberCode() //调接口发送短信

		},
		// 验证码倒计时逻辑
		startCountdown() {
			this.isCounting = true;
			this.timer = setInterval(() => {
				this.countdown--;
				if (this.countdown <= 0) {
					clearInterval(this.timer);
					this.isCounting = false;
					this.countdown = 60;
				}
			}, 1000);
		},
		// 调接口发送短信验证码
		getPhoneNumberCode() {
			if (this.model.mobile === '') {
				uni.showToast({
					title: this.$t('请输入手机号'),
					icon: 'none',
					duration: 1000
				})
			} else if (this.lang === 'ru' && this.model.email === '') {
				uni.showToast({
					title: this.$t('请输入邮箱'),
					icon: 'none',
					duration: 1000
				})
			} else {
				let data = {
					mobile: this.AreaCode === '+86' ? this.model.mobile : this.AreaCode.slice(1) + this.model.mobile, //手机号码
					event: this.lang === 'zh' ? 'register' : 'register_ru', //事件名称：注册=register，重置密码=resetpwd
					langs: this.lang,
					email: this.model.email
				}
				// 调用发送验证码接口 'sendCaptcha'
				this.$u.api.user.sendCaptcha(data).then(res => {
					// 验证码倒计时逻辑
					this.startCountdown();
				})
			}

		},
		// 切换语言
		handelLang(index) {
			// 设置手机号选择的+86或+7
			this.AreaCode = this.selectorObj[index].name
			this.indexID = index
			// 切换语言
			if (index === 0) {
				this.lang = 'zh'
				this.langs = 'zh'
			} else {
				this.lang = 'ru'
				this.langs = 'ru'
			}
			/** 设置语言 */
			uni.setStorage({
				key: 'lang',
				data: this.lang
			})
			// 更新语言
			getApp().globalData.lang = this.lang
			this.$i18n.locale = this.lang
		},
		// 返回上一页
		handelReturn() {
			uni.navigateBack()
		},
		// 获取当前缓存语言
		getLang() {
			uni.getStorage({
				key: 'lang',
				success: res => {
					if (res.data == 'zh') {
						this.indexID = 0
						this.lang = 'zh'
						this.AreaCode = '+86'
						this.AreaCodeIndex = 0
					} else {
						this.indexID = 1
						this.lang = 'ru'
						this.AreaCode = '+7'
						this.AreaCodeIndex = 1
					}
				}
			});
		},
		// 跳转至服务协议页面
		handelePrivacy() {
			this.$u.route({
				url: '/pages/user/privacy/privacy',
				params: {
					type: 'GLUZ用户账号服务协议'
				}
			})
		},


		// 跳转至隐私政策
		showXy2() {
			uni.navigateTo({
				url: '/pages/user/privacy/agreement'
			})
		},
		// 已有账号
		handelAlreadyhaveanaccount() {
			uni.navigateBack()
		}

	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}

}
</script>


<style lang="scss" scoped>
.log_group {
	// margin-bottom: 100rpx;
	width: calc(100% - 60rpx);
	margin: 50rpx 0 10rpx 0;

	
}

.log_u-checkbox {
	width: 100%;
	display: flex;
	align-items: center;
}

.backColor {
	width: 100%;
	height: 400rpx;
	background-image: url('/static/img/bg_1.png');
	background-size: cover;
	position: absolute;
	top: 0;
	z-index: -1;
}

.existence {
	width: calc(100% - 100rpx);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #A4A4A4;
	margin-top: 28rpx;
	margin-bottom: 38rpx;
	position: fixed;
	bottom: 200rpx;
}

.re_mobile_87 {
	margin-right: 14rpx;
}

.re_mobile {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.ico {
		flex-shrink: 0;
		width: 39rpx;
		height: 26rpx;
		margin-right: 10rpx;
		// margin-top: 6rpx;
	}
}

.re_ver {
	width: 210rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.re_line {
	width: 2rpx;
	height: 30rpx;
	// background-color: #FF4E00;
	background: #000000;
}

.re_VerificationCode {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

.custom-style {
	// background-color: #000000;
	// color: #ffffff;
	background: linear-gradient(to left, #64D4E3, #2A8EFE);
	border-radius: 80rpx;
	color: #ffffff;
	height: 100rpx;
	box-shadow: 0 25rpx 26rpx #daeef7;
	border: 0;
}

.re_but {
	margin: 80rpx 0rpx 0rpx 0rpx;
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.re_Privacy {
	width: 100%;
	display: flex;
	// margin-top: 20rpx;
	justify-content: flex-start;
	align-items: center;
	font-size: 20rpx;
	flex-wrap: wrap;
}

.re_form {
	width: calc(100% - 80rpx);
}

.active {
	width: 136rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid #A4A4A4;
	border-radius: 26rpx;
	background-color: #FFFFFF;
	color: #A4A4A4;
}

.itemActive {
	width: 136rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	// border: 1rpx solid #000000;
	color: #ffffff;
	border-radius: 26rpx;
	// background-color: #D5EF9B;
	background: linear-gradient(to bottom, #64D4E3, #2A8EFE);
}


.re_lang_ri {
	width: 284rpx;
	height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.re_lang {
	margin: 58rpx 0 18rpx 0;
	height: 50rpx;
	width: calc(100% - 80rpx);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.re_GLUZ_title {
	margin-top: 8rpx;
	width: calc(100% - 80rpx);
	// height:60rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 70rpx;
}

.re_return {
	width: calc(100% - 60rpx);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30rpx;
	padding: 26rpx 0;
}

.re_content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	// background-color: #ffffff;
}

::v-deep .u-checkbox[data-v-54acf820] {
	display: flex !important;
	margin: 0;
	padding: 0;
}
</style>